
<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">VideoPlayer</a>
    </div>
    <ul class="nav navbar-nav">
    <li><a routerLink="/home" routerLinkActive="active">Home</a></li>
    <li><a routerLink="/videos" routerLinkActive="active">Playlist</a></li>            
    </ul>
  </div>
</nav>   

<carousel>
  <slide>
    <img src="../../assets/img/taylor.jpg" alt="First slide">
    <div class="carousel-caption">
      <h2>Reputation</h2>
      <p>Pre-order Taylor Swift's new album quickly!</p>
    </div>
  </slide>
  <slide>
    <img src="../../assets/img/DNA.png" alt="Second slide">
    <div class="carousel-caption">
      <h2>The life cycle of a t-shirt</h2>
      <p>Lesson by Angel Chang, animation by TED-Ed.</p>
    </div>
  </slide>
  <slide>
    <img src="../../assets/img/AT.png" alt="Third slide">
    <div class="carousel-caption">
      <h2>America's Got Talent 2017</h2>
      <p>Preacher Lawson is back! </p>
    </div>
  </slide>
</carousel>
<!--<div class="ad" id="picBox">
	<div class="loading"><img src="../../assets/img/loading.gif" alt="图片加载中" /></div>
		<div class="pic">
			<ul>
				<li><img src="../../assets/img/taylor.jpg" /></li>
				<li><img src="../../assets/img/DNA.png" /></li>
				<li><img src="../../assets/img/AT.png" /></li>
			</ul>
		</div>
	</div>-->

<hr>

<div class="container">
<div class="row">
  <div class="col-sm-9">
    <div *ngIf="!hidenewVideo">
      <h2>New Video</h2>
      <form #form="ngForm" class="well" (ngSubmit)="onSubmitAddVideo(form.value)">
        <div class="form-group">
          <label>Title</label>
          <input type="text" name="title" required ngModel class="form-control">
        </div>
        <div class="form-group">
          <label>Url</label>
          <input type="text" name="url" required ngModel class="form-control">
        </div>
        <div class="form-group">
          <label>Description</label>
          <input type="text" name="description" required ngModel class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Save</button>
      </form>
    </div>
    <video-detail (updateVideoEvent)="onUpdateVideoEvent($event)" 
    (deleteVideoEvent)="onDeleteVideoEvent($event)" *ngIf="selectedVideo && hidenewVideo" [video]="selectedVideo"></video-detail>

  </div>
  <div class="col-sm-3">
    <button (click)="newVideo()" type="button" style="margin-bottom:2px;" class="btn btn-success btn-block">+ Add New VIdeo</button>

    <!--add a waiting sign-->
    
    <video-list (SelectVideo)="onSelectVideo($event)" [videos]="videos"></video-list>
  </div>
</div>

</div>

<hr>
<hr>